<template>
 <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row>
          <el-input v-model="listQuery.user_code" class="marginRB10" clearable placeholder="用户ID" style="width:200px;"
          ></el-input>
          <el-input v-model="listQuery.nickname" class="marginRB10" clearable placeholder="用户昵称"
                    style="width:200px;"
          ></el-input>
          <el-select v-model="listQuery.game_id" placeholder="认证技能">
            <el-option
              v-for="item in options1"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select v-model="listQuery.status" placeholder="收益状态">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-button class="marginRB10" el-button icon="el-icon-search" type="primary" @click="searchList">搜索
          </el-button>
          <el-button class="marginRB10" el-button icon="el-icon-search" type="primary" @click="handleReset">重置
          </el-button>
          <el-upload
            class="upload-demo"
            action=""
            :show-file-list="false"
            :limit="1"
            :http-request="handleUserLevelExcel">
            <el-button size="small" type="primary">导入</el-button>
          </el-upload>
          <el-button class="marginRB10" el-button type="danger" @click="handleResetLevel">重置陪玩等级
          </el-button>
        </el-row>
      </div>
      <div class="item">
        <el-table ref="dataList" v-loading="listLoading" :data="menuList"
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}" border
                  style="margin-bottom: 20px;"
        >
          <el-table-column label="序号" prop="id" width="80"></el-table-column>
          <el-table-column label="用户ID" prop="user_code"></el-table-column>
          <el-table-column label="用户昵称" prop="nickname"></el-table-column>
          <el-table-column label="性别" prop="sex">
            <template slot-scope="{row}">
              <el-tag :type="row.sex === 1 ? 'primary' : 'success'">{{ row.sex === 1 ? '男' : '女' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="会员等级" prop="wealth_level"></el-table-column>
          <el-table-column label="已认证技能" prop="ability">
            <template slot-scope="{row}">
              {{ row.ability.toString() }}
            </template>
          </el-table-column>
          <el-table-column label="陪玩等级" prop="level_name">
            <template slot-scope="{row}">
              <el-tag effect="dark" size="normal" type="success">
                <span>{{ row.level_name }}</span>
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="累计接单收益（m豆）" prop="profit"></el-table-column>
          <el-table-column label="未结收益" prop="unProfit"></el-table-column>
          <el-table-column label="收益状态" prop="status">
            <template slot-scope="{row}">
              <el-tag :type="row.status === 1 ? 'success' : 'error'">{{ row.status === 1 ? '正常' : '冻结' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="封禁截止时间" prop="ban_time"></el-table-column>
          <el-table-column label="认证时间" prop="created_at"></el-table-column>
          <el-table-column label="技能类型" prop="type">
            <template slot-scope="{row}">
              <el-tag effect="dark" size="normal" type="success">
                {{ row.type === 1 ? '冥想' : '游戏' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="date" width="300">
            <template slot-scope="scope">
              <el-button
                icon="el-icon-edit"
                plain
                size="small"
                type="primary"
                @click="handleDialogShow(scope.row)"
              >查看
              </el-button>
              <el-button
                v-if="!scope.row.ban_time || new Date(scope.row.ban_time).getTime() < new Date().getTime()"
                icon="el-icon-edit"
                plain
                size="small"
                type="primary"
                @click="handleBan(scope.row)"
              >封禁账号
              </el-button>
              <el-button
                v-else
                icon="el-icon-edit"
                plain
                size="small"
                type="primary"
                @click="handleUnban(scope.row)"
              >解封账号
              </el-button>
              <el-button
                plain
                size="small"
                type="warning"
                @click="handleEditLevel(scope.row)"
              >修改陪玩等级
              </el-button>
            </template>
          </el-table-column>

        </el-table>
        <!-- 分页 -->
        <cus-pagination
          v-show="total > 0"
          :limit.sync="listQuery.perPage"
          :page.sync="listQuery.page"
          :total="total"
          @pagination="getList"
        />
      </div>
    </el-card>
    <el-dialog
      :visible.sync="visible"
      title="查看"
      width="40%"
      @close="form = {}"
    >
      <el-form ref="form" :inline="false" class="details" :model="form" :rules="rules" label-width="150px" size="normal">

        <el-form-item label="用户头像">
          <el-image :src="form.head_picture" class="w-20" fit="fill"></el-image>
        </el-form-item>
        <el-form-item label="用户ID：" prop="">
          <p>{{ form.user_code }}</p>
        </el-form-item>
        <el-form-item label="用户昵称：" prop="">
          <p>{{ form.nickname }}</p>
        </el-form-item>
        <el-form-item label="性别：" prop="">
          <p>{{ form.sex === 1 ? '男' : '女' }}</p>
        </el-form-item>
        <el-form-item label="会员等级：" prop="">
          {{ form.wealth_level }}
        </el-form-item>
        <el-form-item label="已认证技能：" prop="">
          <div class="tagBox">
            <div v-for="(item, index) in form.ability" :key="index">
              <el-tag effect="dark" size="normal" type="success">{{ item }}</el-tag>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="接单量（单）：" prop="">
          <span>今日：{{ form.today_count }}</span>
          <span>本周：{{ form.web_count }}</span>
          <span>累计：{{ form.count }}</span>
        </el-form-item>
        <el-form-item label="收益（金豆）：" prop="">
          <span>今日：{{ form.today_profit }}</span>
          <span>本周：{{ form.web_profit }}</span>
          <span>累计：{{ form.profit }}</span>
        </el-form-item>
        <el-form-item label="收益状态：" prop="">
          <el-tag :type="form.status === 1 ? 'success' : 'error'">{{ form.status === 1 ? '正常' : '冻结' }}</el-tag>
        </el-form-item>
        <el-form-item label="封禁截止时间：" prop="">
          <p>{{ form.ban_time }}</p>
        </el-form-item>
        <el-form-item label="认证时间：" prop="">
          <p>{{ form.created_at }}</p>
        </el-form-item>

      </el-form>
    </el-dialog>

    <!-- 封禁账号 -->
    <el-dialog
      :visible.sync="banIpDialogVisible"
      title="封禁账号"
      width="30%"
      @close="handleDialogClose('banReasonForm')"
    >
      <el-form ref="banReasonForm" :model="banReasonForm" class="demo-ruleForm" label-width="150px">
        <el-form-item :rules="[{ required: true, message: '封禁截止日期' }]" label="封禁截止日期" prop="ban_time">
          <el-date-picker
            v-model="banReasonForm.ban_time"
            placeholder="选择日期时间"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item :rules="[{ required: true, message: '封禁原因不能为空' }]" label="封禁原因" prop="remark">
          <el-input v-model="banReasonForm.remark" type="textarea"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="banIpDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmBanIp('banReasonForm')">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 解封 -->
    <el-dialog
      :visible.sync="unBanDialogVisible"
      title="解封账号"
      width="435px"
    >
      <span style=""><em style="font-style: normal; color: red">确定要解封账号吗？</em></span>
      <span slot="footer" class="dialog-footer">
                <el-button @click="unBanDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmBanIp(null)">确 定</el-button>
            </span>
    </el-dialog>

    <!-- 修改陪玩等级 -->
    <el-dialog
      :visible.sync="dialogVisible"
      title="修改陪玩等级"
      width="30%"
      @close="handleDialogClose('LevelForm')"
    >
      <el-form ref="LevelForm" :model="LevelForm" class="demo-ruleForm" label-width="150px">
        <el-form-item prop="ban_time" label="当前陪玩等级">
          <el-button type="success" plain>{{ LevelForm.level_name }}</el-button>
        </el-form-item>
        <el-form-item prop="type" label="技能类型" :rules="[{ required: true, message: '请选择' }]">
          <el-select v-model="LevelForm.type" value-key="" placeholder="" clearable filterable @change="handleChangeType" disabled>
            <el-option v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          
        </el-form-item>
        <el-form-item :rules="[{ required: true, message: '请选择陪玩等级' }]" label="修改陪玩等级" prop="level_id">
          <el-select v-if="LevelForm.type === 1" v-model="LevelForm.level_id" value-key="" placeholder="" clearable filterable>
            <el-option v-for="item in options2"
              :key="item.id"
              :label="item.level_name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-select v-else v-model="LevelForm.level_id" value-key="" placeholder="" clearable filterable>
            <el-option v-for="item in options4"
              :key="item.id"
              :label="item.level_name"
              :value="item.id">
            </el-option>
          </el-select>
          
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmLevel">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import { 
  accompanyList, 
  accompanyUser, 
  userBan, 
  userLevel, 
  userLevelExcel, 
  levelResetting,
  getUserLevel
} from '@/api/playManagement'

export default {
  data() {
    return {
      dialogVisible: false,
      visible: false,
      unBanDialogVisible: false,
      banReasonForm: {
        id: undefined,
        remark: undefined,
        ban_time: undefined,
        status: undefined
      },
      banIpDialogVisible: false,
      deleteDialogVisible: false,
      options: [
        {
          id: 1,
          name: '正常'
        },
        {
          id: 2,
          name: '冻结'
        }
      ],
      options1: [],
      options2: [],
      options4: [],
      options3: [
        {
          value: 0,
          label: '游戏'
        },
        {
          value: 1,
          label: '冥想'
        }
      ],
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1,
        perPage: 10,
        nickname: undefined,
        user_code: undefined,
        game_id: undefined,
        status: undefined
      },
      menuList: [],
      dialogFormVisible: false,
      dialogStatus: '',
      titleMap: {
        update: '编辑',
        create: '增加'
      },
      form: {
        id: undefined,
        name: undefined
      },
      rules: {
        name: [{ required: true, message: '请输入名字', trigger: 'blur' }]
      },
      LevelForm: {
        level: undefined,
        level_id: undefined,
        type: undefined
      }
    }
  },
  created() {
    this.getList()
    this.getAccompanyList()
    this.handleGetUserLevel(0)
    this.handleGetUserLevel(1)
  },
  methods: {
    handleReset() {
      this.listQuery = {
        page: 1,
        perPage: 10,
        nickname: undefined,
        user_code: undefined,
        game_id: undefined,
        status: undefined
      }
      this.getList()
    },
    handleChangeType(val) {
      this.handleGetUserLevel(val)
      this.LevelForm.level_id = undefined
    },
    handleGetUserLevel(type) {
      getUserLevel({
        type: type
      }).then(res => {
        if(res.code === 200) {
          
          if(type === 1) {
            this.options2 = res.data
          }else {
            this.options4 = res.data
          }
        }
      })
    },
    async getAccompanyList() {
      const { data } = await accompanyList({
        page: 1,
        perPage: 9999
      })
      this.options1 = data.data
    },
    getList() {
      this.listLoading = true

      for (let key in this.listQuery) {
        this.listQuery[key] =
          this.listQuery[key] === '' ? undefined : this.listQuery[key]
      }
      accompanyUser(this.listQuery).then(({ data: { data, total } }) => {
        data.map(item => {
          if (item.ban_time) {
            if (new Date(item.ban_time).getTime() > new Date().getTime()) {

            }
          }
        })
        this.menuList = data
        this.total = total
        this.listLoading = false
      })
    },
    searchList() {
      this.listQuery.page = 1
      this.getList()
    },
    handleDialogShow(row) {
      this.form = JSON.parse(JSON.stringify(row))
      if (this.form.comment_label) {
        this.form.comment_label = this.form.comment_label.split(',')
      }
      this.visible = true
    },
    confirmBanIp(v) {
      console.log(v)
      if(v) {

        this.$refs['banReasonForm'].validate(valid => {
          if (valid) {
            userBan(this.banReasonForm).then(res => {
              if (res.code === 200) {
                this.$message({
                  type: 'success',
                  message: '操作成功'
                })
                this.banIpDialogVisible = false
                this.getList()
              }
            })
  
          }
        })
      }else {
        userBan(this.banReasonForm).then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            this.unBanDialogVisible = false
            this.getList()
          }
        })
      }
    },
    handleDialogClose(form) {
      this.banReasonForm = {
        id: undefined,
        remark: undefined,
        ban_time: undefined,
        status: undefined
      }
      if (this.$refs[form]) {
        this.$refs[form].resetFields() // 清除整个表单
        this.$refs[form].clearValidate() // 清除整个表单的校验
      }
      // if (this.$refs['banReasonForm']) {
      //   this.$refs['banReasonForm'].resetFields() // 清除整个表单
      //   this.$refs['banReasonForm'].clearValidate() // 清除整个表单的校验
      // }
    },
    handleBan(row) {
      console.log(row)
      this.banReasonForm.id = row.id
      this.banReasonForm.status = 0
      this.banIpDialogVisible = true
    },
    handleUnban(row) {
      this.banReasonForm.id = row.id
      this.banReasonForm.status = 1
      this.unBanDialogVisible = true
    },
    handleEditLevel(row) {
      this.LevelForm = JSON.parse(JSON.stringify(row))
      this.handleGetUserLevel(this.LevelForm.type)
      this.dialogVisible = true
    },
    editUserLevel(data) {
      userLevel(data).then(res => {
        if(res.code === 200) {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.dialogVisible = false
          this.getList()
        }
      })
    },
    confirmLevel() {
      this.$refs['LevelForm'].validate(valid => {
        if (valid) {
          this.editUserLevel(this.LevelForm)
        }
      })
    },
    handleUserLevelExcel(file) {
      console.log(file)
      const formData = new FormData()
      formData.append('file', file.file)
      userLevelExcel(formData).then(res => {
        if(res.code === 200) {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.getList()
        }
      })
    },
    handleResetLevel() {
      this.$confirm('此操作将重置陪玩等级, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          levelResetting().then(res => {
            if(res.code === 200) {
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              this.getList()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
    }
  }
}
</script>
<style lang="scss" scoped>
[v-cloak] {
  display : none;
}

.clearfix:before,
.clearfix:after {
  display : table;
  content : "";
}

.clearfix:after {
  clear : both
}

.box-card {
  width : 100%;
}

.demo-form-inline {
  float : right;
}

::v-deep {
  .upload-demo{
    display: inline-block;
    height: 40px;
    margin-right: 10px;
    
    .el-upload{
      height: 100%;
    }
    button{
      height: 100%;
    }
  }
  .el-card__header {
    padding-bottom : 0;
  }

  .tagBox {
    display   : flex;
    flex-wrap : wrap;

    div {
      margin-right : 10px;
    }
  }
  .details {
    .el-form {
      border : 1px solid #ddd;
    }

    .el-form-item {
      padding-bottom : 22px;
      border-bottom  : 1px solid #ddd;
    }
    .el-form-item:nth-child(1) {
      padding-top : 22px;
    }
  
    .el-form-item:last-child {
      border-bottom : none;
    }
  }

}
</style>
